<script setup lang='ts'>
import type { VxeGridProps } from 'vxe-table'

import { useExportCbBiddingProject, useGetCbBiddingSupplierProductList, useSubmitBiddingProject } from '@fl/api/supplier'
import { SearchTable } from '@fl/components'
import { useMessage } from '@fl/hooks/web/use-message'
import dayjs from 'dayjs'
import { cloneDeep } from 'lodash-es'
import NP from 'number-precision'

import { BIDDING_STATUS_DICT } from './constant'

const { back, push } = useRouter()

const { params } = useRoute()

const { data, isLoading } = useGetCbBiddingSupplierProductList(ref(String(params.id)))

const { createConfirmModal } = useMessage()

const { isPending, mutate } = useExportCbBiddingProject()
const { isPending: submitPending, mutate: submitMuate } = useSubmitBiddingProject()

const gridOptions = reactive<VxeGridProps>({
    columns: [
        { fixed: 'left', title: '序号', type: 'seq', width: 50 },
        { field: 'categoryName', title: '组价商品类目' },
        { field: 'productName', title: '组价商品名称' },
        { field: 'totalPrice', title: '除税价(元)' },
        {
            field: 'rate',
            formatter(params) {
                return params.cellValue ? `${params.cellValue}%` : params.cellValue
            },
            title: '税率',
        },
        { field: 'ratePrice', title: '含税价(元)' },
        { field: 'quantity', title: '数量' },
        { field: 'allTotalPrice', title: '不含税总价(元)' },
        { field: 'status', formatter(params) {
            return BIDDING_STATUS_DICT[params.cellValue ?? 0]
        }, title: '状态' },
        { field: 'opreate', slots: { default: 'opreate' }, title: '单价汇总' },
    ],

    maxHeight: 400,
    rowConfig: {
        keyField: 'productId',
    },
})

const tableData = computed(() => {
    return cloneDeep(data.value?.supplierProductList) ?? []
})

const isAfterEnding = computed(() => dayjs().isAfter(data.value?.endTime || ''))

const total = computed(() => {
    const result = (tableData.value ?? []).reduce((accumulator, current) => {
        return accumulator + (Number(current.allTotalPrice) || 0)
    }, 0)

    return NP.round(result, 4)
})
function goGroupPrice(row: any) {
    push(`/supplier-pages/pricing-tool/bid-home/${row.productId}/${row.projectId}`)
}

function exportFile() {
    if (params.id)
        mutate(String(params.id))
}
function bidding() {
    createConfirmModal({
        content: '是否确认投标?',
        onError: () => {
            ElMessage.info('取消投标')
        },
        onSuccess: () => {
            submitMuate(
                {
                    projectId: String(params.id),
                },
                {
                    onSuccess: () => {
                        ElMessage.success('投标成功')
                        back()
                    },
                },
            )
        },
    })
}
</script>

<template>
    <ElCard shadow="never"
            mb-20
            h-800
            class="flex! flex-col!"
            :body-style="{ flex: '1', overflow: 'auto' }"
    >
        <template #header>
            <div class="title">
                工程分项价格清单表
            </div>
        </template>

        <div px-20
             py-10
             h-full
        >
            <SearchTable v-bind="gridOptions"
                         :loading="isLoading"
                         :data="tableData"
                         mb-50
            >
                <template #opreate="{ row }">
                    <el-button text
                               type="primary"
                               @click="goGroupPrice(row)"
                    >
                        组价
                    </el-button>
                </template>
            </SearchTable>

            <div text-16>
                不含税合计 {{ total }}元
            </div>
        </div>

        <template #footer>
            <div flex
                 justify-center
                 items-center
            >
                <el-button @click="back">
                    返回
                </el-button>

                <el-button type="primary"
                           color="#fff0f0"
                           class="text-#da0004!"
                           :loading="isPending"
                           @click="exportFile"
                >
                    导出
                </el-button>

                <el-button v-if="!isAfterEnding"
                           type="primary"
                           :loading="submitPending"
                           @click="bidding"
                >
                    投标
                </el-button>
            </div>
        </template>
    </ElCard>
</template>

<style lang="scss" scoped>
.title {
    font-size: 16px;
    font-weight: bold;
}

:deep(.el-card),
:deep(.el-card__footer) {
    border: none;
}
</style>
